<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮箱验证码</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        html{
            height:100%;
        }
        body{
            font-size:14px;
            height:100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #wrapper{
            width:650px;
            /*height:500px;*/
            border-radius:12px;
            overflow: hidden;
            border:1px solid #ccc;
        }
        header{
            background-color:#eee;
            padding:12px;
            color:#247ab8;
            font-weight:bolder;
            font-style: italic;
            font-size:28px;
        }
        #content{
            padding:24px 12px;
            background-color:#fff;
        }
        #content p{
            line-height:32px;
            font-size:14px;
        }
        #content .title{
            color:#f00;
            font-size:24px;
            font-weight:bold;
            margin:12px 0;
        }
        .verifyCode{
            text-align:center;
            font-weight:bold;
            padding:12px;
            border-radius: 6px;
            background-color:#eee;
            border:1px solid #ccc;
            line-height:24px;
            margin:12px 0;
        }
        #content p span{
            font-weight:bold;
        }
        footer{
            text-align:center;
            font-weight:bold;
            padding:12px;
            border-top:1px solid #ccc;
            margin-top:24px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            WhimQuest
        </header>
        <div id="content">
            <p class="title">验证您的邮箱地址</p>
            <p><span>{username}</span>，您好。</p>
            <p>您的验证码：</p>
            <p class="verifyCode">{verifyCode}</p>
            <p>请在 <span>{minutes}</span>  分钟内将此验证码输入验证码输入框，以完成验证。</p>
            <p>如果您并没有进行上述操作，请忽略该邮件。</p>
            <p>您不需要进行退订或者其他操作。</p>
            <p>此邮件为系统自动发出的邮件，请勿直接回复。</p>
            <footer>
                WhimQuest
            </footer>
        </div>
    </div>
</body>
</html>